/*
 *  SOCIAL MEDIA SHARING
 *  On each blog post, this is the component that includes each social media sharing button
 *
 */

.social-media-sharing {
  $width: 38px;
  $height: 38px;
  $font-size: 16px;

  padding: 0;
  list-style: none;

  .channel {
    min-width: $width;
    height: $height;
    border-radius: 50%;

    a {
      display: block;
      width: 100%;
      height: 100%;
      border-bottom: 0;

      &:after {
        display: none;
      }
    }

    .svg-container {
      position: absolute;
      display: flex;
      align-items: center;
      width: $height * 2;
      height: $height;
      margin-left: 6px;

      .logo {
        display: block;
        width: 22px;
        height: 22px;
        fill: #fff;
      }
    }

    /* Each social network has an icon on the relavant brand colour */
    @each $channel, $colour in $social-media-colours {
      &.#{$channel} {
        background: $colour;
      }
    }
  }

  @media screen and (min-width: $bp-medium) {
    .channel {
      min-width: $width;
      height: $height;

      span {
        font-size: $font-size;
      }

      .svg-container {
        justify-content: center;
        width: $height;
        height: $height;
        margin-left: 0;
      }
    }
  }
}
